<template>
  <div class="app-content app-content-mobile" :style="{ paddingBottom: (tabar ? '1rem' : '0') }">
    <div class="app-title-group">
      <van-nav-bar :title="title" :left-text="tabar ? '' : '返回'" :left-arrow="tabar ? false : true"
        @click-left="onClickLeft"></van-nav-bar>
    </div>
    <div class="app-router-mobile">
      <!-- <keep-alive include='mobileResourceList,tempMobile,homeSearch'></keep-alive> -->
      <router-view></router-view>
    </div>
    <van-tabbar safe-area-inset-bottom v-model="active" v-if="tabar" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
  </div>
</template>
<script>
import { Icon, Toast, NavBar, Tabbar, TabbarItem } from 'vant';
export default {
  components: { [Icon.name]: Icon, [NavBar.name]: NavBar, [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem },
  data() {
    return {
      active: 0,
      title: '首页',
      tabar: false,
    };
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.tabar = to.meta.tabar;
      this.setScrollTop();
    }
  },
  created() {
    this.title = this.$route.meta.title;
    this.tabar = this.$route.meta.tabar;
  },
  methods: {
    setScrollTop() {
      window.scrollTo(0, 0);
    },
    onClickLeft() {
      if (window.history.state && window.history.state.key) {  //返回上级h5
        this.$router.back();
      } else {  //返回app页面
        location.href=location.origin+'/weChatApp'
      }
    },
    onChange(e) {
      this.active = e;
      if (e == 0) {
        this.$router.push({ path: '/match' });
      } else if (e == 1) {
        this.$router.push({ path: '/user' });
      }
    },
    Text2Html(str) {
      if (str == null) {
        return "";
      } else if (str.length == 0) {
        return "";
      }
      str = str.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
      str = str.replace(/\n/g, '<br/>'); //IE7-8
      str = str.replace(/\s/g, '&nbsp;'); //空格处理
      return str;
    }
  }
};
</script>

<style lang="less">
.app-content-mobile {
  padding-top: 0.92rem;
  position: relative;
}

.app-content {
  .van-tabbar {
    border-top: 1px solid #eee;
  }

  .van-nav-bar__content {
    height: 0.92rem;
  }

  width: 100%;
  height: 100%;

  .app-router-mobile {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-title-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fafafa;
    align-items: center;
    height: 0.92rem;
    z-index: 999;
    border-bottom: 1px solid #eee;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.2);

    .van-nav-bar {
      background: linear-gradient(to bottom right, #4DA5FE 0%, #45A0FF 100%);

      .van-nav-bar__title {
        color: #fff;
        font-size: 0.3rem;
        line-height: 0.3rem;
      }
    }

    .van-nav-bar__left {

      .van-icon,
      .van-nav-bar__text {
        color: #fff;
        font-size: 0.3rem;
        line-height: 0.3rem;
      }

    }
  }

  .van-tabbar {
    height: 1rem;
  }

  .van-tabbar-item__icon {
    font-size: 0.44rem;
  }

  .van-tabbar-item__text {
    font-size: 0.28rem;
  }

  .app-title-group img {
    height: 24px;
    width: auto;
  }

  /* 插件部分样式重置 */
  .van-cell {
    padding: 0.3rem 0.3rem;
    font-size: 0.3rem;
    line-height: 0.48rem;
  }


  .van-cell__left-icon {
    height: 0.48rem;
    font-size: 0.4rem;
    line-height: 0.48rem;
    margin-right: 0.1rem;
  }

  .van-cell__right-icon {
    height: 0.48rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
  }
}
</style>
